<template>
  <el-container class="home-container">
    <!--头部区域-->
    <el-header>
      <!--logo和标题-->
      <div>
        <img src="../../assets/mylogo.png" style="margin-left:-15px;width:200px;">
        <span style="margin-left: 10px;">毕业论文管理系统</span>
      </div>
      <!--退出按钮-->
      <div>
        <el-dropdown>
          <span class="el-dropdown-link" style="cursor: pointer;">
            <span class="name">{{username}}</span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-user" @click.native="showInfo">个人信息</el-dropdown-item>
            <el-dropdown-item icon="el-icon-unlock" @click.native="dialogFormVisible = true">修改密码</el-dropdown-item>
            <el-dropdown-item icon="el-icon-switch-button" @click.native="logoutLeader">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <!--主体区域-->
    <el-container>
      <!--侧边栏-->
      <el-aside :width="isMenuCollapsed ? '120px' : '200px'">
        <!--控制菜单折叠--> 
        <div style="" class="toggle-button el-icon-user-solid"  @click="toggleCollapse">学院领导</div>
        <!--菜单列表-->
        <el-menu router
          :collapse="isMenuCollapsed"
          :collapse-transition="false"
          unique-opened
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409BFF"
          :default-active="activePath">
          <!--一级菜单-->
          <el-submenu :index="String(menu.id)" v-for="menu in menuList" :key="menu.id">
            <template slot="title">
              <!-- 图标 -->
              <i :class="menu.icon"></i>
              <!-- 名称 -->
              <span>{{menu.title}}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="submenu.path"
              v-for="submenu in menu.children"
              :key="submenu.id"
              @click="saveActivePath(submenu.path)">
              <template slot="title"> 
                <!-- 名称 -->
                <span style="padding-left:10%">{{submenu.title}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--内容区域-->
      <el-main>
        <!--路由占位符 原始-->
        <router-view></router-view> 
      </el-main>
      <BaseFooter /> 
      <!-- 个人信息展示抽题 :before-close="handleClose"-->
        <el-drawer title="个人信息维护" :visible.sync="draweInfo" direction="rtl"> 
          <LeaderInfo :infoForm="infoForm" />
        </el-drawer>
        <!-- 修改密码对话框 -->
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
          <el-form :model="dialogForm" :rules="dialogFormRules" ref="dialogForm" style="margin:0 100px">
            <el-form-item label="请输入原密码" label-width="120px" prop="oldPassword">
              <el-input style="width:80%" v-model="dialogForm.oldPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="请输入新密码" label-width="120px" prop="newPassword">
              <el-input  style="width:80%" v-model="dialogForm.newPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="请重复新密码" label-width="120px" prop="repeatNewPassword">
              <el-input  style="width:80%" v-model="dialogForm.repeatNewPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-row style="margin-left:30%;margin-top:50px">
              <el-button type="info" round @click="cancleChangePwd">取 消</el-button>
              <el-button type="primary" round @click="submitChangePwd('dialogForm')">确 定</el-button>
            </el-row>
          </el-form> 
        </el-dialog>
    </el-container>
  </el-container>
</template>

<script> 
  import {changePwd, getLeaderInfo } from '../../axios/leader'
  import LeaderInfo from './LeaderInfo.vue'
  import BaseFooter from '../BaseFooter.vue'
  export default {
    name: 'Leader',
    components: {LeaderInfo, BaseFooter},
    data () {
      return {
        draweInfo: false, // 控制个人信息的 显示/隐藏 
        // 菜单列表
        menuList: [
          {id:61090000, title: '首页管理', icon: 'el-icon-menu', children:[
            {id:'0001', path : '/leader/notices', title :'通知公告' } 
          ]},
          {id:61090001, title: '审核请求处理', icon: 'el-icon-s-order', children:[
            {id:'1001', path : '/leader/check/subject', title :'课题申报审核' },
            {id:'1002', path : '/leader/check/assignment', title :'任务书审核' },
            {id:'1003', path : '/leader/check/score', title :'学生成绩审核' } 
          ]},
          {id:61090002, title: '已审核记录查询', icon: 'el-icon-success', children:[
            {id:'1001', path : '/leader/checked/subject', title :'已审核课题查询' },
            {id:'1002', path : '/leader/checked/assignment', title :'已审核任务书查询' },
            {id:'1003', path : '/leader/checked/score', title :'已审核成绩查询' } 
          ]} 
        ],
        
        isMenuCollapsed: false,  // 菜单折叠状态
        activePath: '',// 当前激活菜单 
        username: '', // 当前登录用户 
        dialogFormVisible: false,// 是否显示修改密码对话框
        dialogForm:{
          oldPassword: '',
          newPassword: '',
          repeatNewPassword: '',
        },
        dialogFormRules:{
          oldPassword: [ { required: true, max: 18, min: 6, message: '请输入6-18位原密码', trigger: 'blur' } ],
          newPassword: [ { required: true, max: 18, min: 6,message: '请输入6-18位新密码', trigger: 'blur' } ],
          repeatNewPassword: [ {required:true, max: 18, min: 6, message:'请重复6-18位新密码', trigger: 'blur'} ]
        },
        // 教师个人信息表单数据
        infoForm:{
          id: '', // 领导工号
          name: '', // 姓名
          position: '', // 职位
          job: '', // 职称
          phone: '',
          email: '' 
        },
      }
    },
    methods: {
      // 退出登录
      logoutLeader () {  
        window.sessionStorage.clear() // 清空sessionStorage
        this.$router.push('/login')
        this.$message.success('退出成功') 
      },
      // 折叠或展开菜单
      toggleCollapse(){
        this.isMenuCollapsed = !this.isMenuCollapsed
      },
      // 保存当前激活链接
      saveActivePath(path){ 
        this.activePath = path
        window.sessionStorage.setItem('activePath', path)
      },
      // 提交修改密码
      submitChangePwd(formData){
        // 前端验证 重复密码和新密码是否一致
        if(this.dialogForm.newPassword !== this.dialogForm.repeatNewPassword){
          this.$message.error('重复密码与新密码不一致!')
          return ;
        }
        this.$refs[formData].validate(valid => {
          if(valid){
            // 发送后端请求改密
            changePwd(this.dialogForm.oldPassword, this.dialogForm.newPassword).then(res => {
              if(res.success){ 
                this.$message.success('修改密码成功!')
                this.dialogFormVisible = false
                return true
              } 
            }) 
          }else{
            this.$message.error('请按规则填写各信息项!');
            return false
          }
        }) 
      },
      // 取消修改密码
      cancleChangePwd(){
        // 清空所有所有输入框
        this.$refs.dialogForm.resetFields() 
        this.dialogFormVisible = false;
      },
      // 展示个人信息
      showInfo(){ 
        // 获取个人信息
        getLeaderInfo().then(res => {
          if(res.success){
            this.infoForm = res.data // 成功获取到后台数据
            this.draweInfo = true  
          } 
        })

        // let infoData = {
        //   id: 810001, // 领导工号
        //   name: '刘强冬', // 姓名
        //   position: '副院长', // 职位
        //   job: '副教授', // 职称
        //   phone: '13789799897',
        //   email: '13789799897@126.com' 
        // }
        // this.infoForm = infoData
      }
    },
    // 生命钩子
    created(){
      this.activePath = window.sessionStorage.getItem('activePath')
      this.username = window.sessionStorage.getItem('username')
    }
  }
</script>

<style lang="less" scoped>
  .home-container {
    height: 100%;
  }
  .el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
    padding-right: 0;
    color: #fff;
    font-size: 20px;
    > div {
      display: flex;
      align-items: center;
    }
  }
  .el-aside {
    background-color: #333744;
    .toggle-button {
      width: 100%;
      background-color: #555a6d;
      font-size: 16px;
      line-height: 50px;
      text-align: center;
      color: #fff;
      letter-spacing: 0.2em;
      cursor: pointer;  
    }
    .el-menu {
      border-right: none;
    }
  }
  .el-main {
    background-color: #EAEDF1;
  }
  .el-dropdown {
    padding: 0 25px;
    display: flex;
    min-width: 50px;
    height: 60px;
  }
  .el-dropdown:hover {
    background: #4A5064;
  }
  .el-dropdown-link {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      color: #fff;
    }
  }
  .el-form-item .el-input{
    width: 60%;
  }
</style>
  
